<template>
	<view
        class="gy-drawer gy-mask"
        :class="'gy-mask-' + isShow"
        :style="[props.bottom ? {
            bottom: props.bottom + 'px !important',
            height: `calc(100vh - ${props.bottom + 'px'}) !important`
        } : {}]"
        @click.stop="maskCloseFn">
		<view class="gy-drawer-panel" :class="'gy-drawer-panel-' + isShow" :style="{width: props.width}" @click.stop="" >
			<slot name="head">
				<view class="gy-drawer-head">
				    <view class="gy-drawer-title">{{ props.title }}</view>
				    <view class="gy-drawer-close" @click.stop="closeFn">关闭</view>
				</view>
			</slot>
			<view class="gy-drawer-content">
				<slot></slot>
			</view>
			<slot name="action">
				<view v-if="props.action" class="gy-drawer-action">
					<view class="confirm" @click.stop="submitFn">{{ props.confirmText }}</view>
				</view>
			</slot>
		</view>
	</view>
</template>

<script lang="ts" setup>

    import {
    	ref
    } from "vue";
	
	import {
		
	} from '@dcloudio/uni-app';
	
	const emits = defineEmits(["close", "submit"]);

    const props = defineProps({
    	title: {
    		type: String,
    		default: "抽屉"
    	},
		width: {
    		type: String,
    		default: "100%"
    	},
    	closeOnClickMask: {
    		type: Boolean,
    		default: true
    	},
    	action: {
    		type: Boolean,
    		default: true
    	},
        bottom: {
        	type: Number,
        	default: 0
        },
    	confirmText: {
    		type: String,
    		default: "确 认"
    	}
    });

    const isShow = ref("show");

    function maskCloseFn(){
    	if(props.closeOnClickMask){
    		closeFn();
    	}
    }
    function closeFn() {
    	isShow.value = "hide";
    	setTimeout(() => {
    		emits("close");
    	}, 550)
    }
    function submitFn() {
    	emits('submit')
    }
	
    defineExpose({
        closeFn: closeFn
    });
	
</script>

<style lang="scss" scoped>
	.gy-drawer {
	    .gy-drawer-panel {
			height: 100vh;
	        position: absolute;
			right: -100%;
			overflow: hidden;
			display: flex;
			justify-content: space-between;
			flex-direction: column;
			background-color: #FFFFFF;
	        .gy-drawer-head{
				width: 100%;
	            height: 100rpx;
	            @include flex-between-center;
	            padding: 0 var(--gy-gap);
	            .gy-drawer-title{
	                width: calc(100% - 90rpx);
	                font-weight: bold;
	                font-size: var(--gy-font-size-large);
	                color: var(--gy-text-color-primary);
	                padding-left: 80rpx;
	                text-align: center;
	                @include text-ellipsis(1);
	            }
	            .gy-drawer-close{
	                width: 80rpx;
	                height: 80rpx;
	                @include flex-center-center;
	                font-size: var(--gy-font-size-base);
	                color: var(--gy-text-color-secondary);
	            }
	        }
	        .gy-drawer-content{
	            width: 100%;
	            flex: 1;
	            overflow-y: scroll;
	        }
	        .gy-drawer-action{
	            width: 100%;
	            background-color: #fff;
	            padding: var(--gy-gap) var(--gy-gap) 90rpx var(--gy-gap);
	            .confirm{
	                height: 100rpx;
	                @include flex-center-center;
	                border-radius: 50rpx;
	                color: #ffffff;
	                font-size: var(--gy-font-size-medium);
	                font-weight: 700;
	                padding: 0 var(--gy-gap);
	                background: linear-gradient(315deg, #07BF66 0%, #81AFFF 100%);
	                box-shadow: 0px 3rpx 6rpx #D6E2F8;
	            }
	        }
	    }
	
	    .gy-drawer-panel.gy-drawer-panel-show{
	        animation: gy-drawer-panel-show .5s;
	        animation-fill-mode: forwards;
	    }
	    .gy-drawer-panel.gy-drawer-panel-hide{
	        animation: gy-drawer-panel-hide .5s;
	        animation-fill-mode: forwards;
	    }
	
	    @keyframes gy-drawer-panel-show {
	        from {
				right: -100%;
	        }
	
	        to {
				right: 0;
	        }
	    }
	
	    @keyframes gy-drawer-panel-hide {
	        from {
	            right: 0;
	        }
	
	        to {
	            right: -100%;
	        }
	    }
	
	}
	
</style>